Acerca de.....
El RWD, como guía de buenas prácticas para el diseño de páginas web enfocadas en la navegación multiplataforma, resume muchas ventajas, entre ellas:
- Una única URL, olvidándonos de la multiplicidad de canales, como subdominios mobile- friendly o aplicaciones móviles.
- Se mejora la UX, ya que se mantienen los mismos contenidos y funcionalidades al ser siempre una única página web, indistintamente del dispositivo móvil desde el cual se navegue.
- Sólo es necesario un único desarrollo de código html, válido para una gran cantidad de dispositivos.
- Google, el mayor motor de búsqueda del mundo, lo recomienda que usemos (RWD).
- Mejor experiencia de usuario.
- Se acabaron los contenidos duplicados.
- Se reducen los costes de desarrollo y mantenimiento de la web.
La lectura nos despierta la mente, nos educa, es la práctica más importante para el estudio, nos aporta conocimientos, nos da placer, nos interpela, nos enriquece, pero fundamentalmente nos hace mejores personas.
Media queries
se han incluido en la nueva versión del CCS3 las media queries. Estos son uno de los módulos que componen esta actualización, permitiendo adaptar la presentación de páginas web basándose en condiciones como la resolución de pantalla o en dispositivos específicos.
Dicha adaptación se logra mediante la identificación de algunas de las características del dispositivo en que se mostrará la web; literalmente "query" equivaldría a "pregunta", por lo que las etiquetas y atributos del código CSS preguntan: ¿qué dispositivo se está usando?
Ancho de capas o div
Haciendo referencia al diseño fluido, el principal concepto donde se apoya el RWD, se propone dejar atrás al pixel y los anchos fijos y predefinidos de las webs tradicionales. El ancho, en píxeles, de las capas en las que se estructura una web debe ser fluido y adaptable, adoptando proporcionalidad según sea el caso
El ancho de capas involucra a varios aspectos de la página web, entre los cuales están:
- Los elementos de ancho fijo
- Los elementos de ancho variable (imágenes, vídeos, objetos...)
- Tipografías
los elementos de ancho fijo:
Para aquellos vídeos, imágenes u objetos que tengan un ancho fijo definido desde su origen, al momento de insertarlo en el código de la página se debe identificar dicho ancho como el máximo permitido en la resolución escogida. Así su ancho no excederá el del elemento padre que lo contiene.
los elementos de ancho fijo:
Para conocer el ancho que debería tener un elemento se debe conocer el ancho inicial del mismo, y dividirlo entre el ancho del elemento original.
Tipografías:
La adaptación proporcional de las fuentes es bastante similar a la de los elementos de ancho variable. En RWD se define el tamaño de la fuente por el cuadratín. El cuadratín es un término que procede de la tipografía y que se usa para indicar una medida que se calcula en función del ancho de la letra "m" de la tipografía que se esté utilizando.15 En CSS se habla del atributo "em" para referirse a esta medida.
Para calcular el tamaño del cuadratín, en primer lugar hay que identificar el tamaño base o general de la fuente; en diseño web se asume que 1em equivale al ancho de la letra "m" cuando se visualiza en tamaño 16px, que es el tamaño que tiene por defecto el navegador. Esos 16px se usan como divisor para calcular los demás tamaños al cambiar de resolución. Existen conversores online16 para las medidas de las tipografías, en caso de que se necesiten convertir tamaños exactos.